<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reasons for Using Bootstrap</title>
    <link meta="description" content="Reasons to use Bootstrap instead of custom CSS">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <meta property="og:image" name="twitter:image" content="http://themes.guide/favicon-1024.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ThemesGuide">
    <meta name="twitter:creator" content="@ThemesGuide">
    <meta name="twitter:title" content="Reasons for Using Bootstrap 4">
    <meta name="twitter:description" content="What is Bootstrap and why should I use it?">
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-103606808-1', 'auto');
      ga('send', 'pageview');
    </script>
    <script src="https://www.codeply.com/js/embed.js"></script>
  </head>
  <body id="page-top" data-spy="scroll" data-target=".fixed-top" data-offset="60">
    <% include ./partials/nav %> 
    <div class="container pt-5">
        <div class="row mt-5">
            <div class="col-md-12">
                <% include ./partials/htb %>
            </div>
            <div class="col-md-12 pt-5 text-center">
                <h1 class="display-3 font-weight-light">What is Bootstrap?</h1>
                <h1>and, Why Should I Use It?</h1>
            </div>
        </div>
    </div>
    
    <section id="howto">
        <div class="container">
            <div class="row mb-3">
                <div class="col-sm-10 mx-auto">
                    
                            
                    <h3 class="pb-5 text-justify">Bootstrap consists of CSS and JavaScript files. Bootstrap is a framework (a.k.a - "library" or "toolkit") that makes 
                    Web development <strong>faster</strong> and <strong>easier</strong>.</h3>
                    
                    <p class="lead font-weight-bold">
                        Bootstrap helps with creation of Websites that are:
                    </p>
                    
                    <h4>Consistent</h4>
                    <p class="lead ml-lg-5">
                    Foremost, Bootstrap provides a consistent, uniform appearance and design. With very little effort, 
                    Bootstrap can be used to transform a hodge-podge site into a professional, visually appealing design.
                    </p>
                    
                    <h4>Responsive</h4>
                    <p class="lead ml-lg-5">
                    Sites created with Bootstrap are designed to look & function well on <em>any</em> device including desktops, 
                    laptops, tablets and smartphones. Bootstrap is "mobile-first" which means the design for smaller 
                    mobile devices is considered foremost.
                    </p>
                    
                    <h4>Compatible</h4>
                    <p class="lead ml-lg-5">
                    Bootstrap is a mature, tested code-base that is entirely based on standards and cross-browser compliance. 
                    Sites that properly utilize what Bootstrap offers will also benefit from this compatibility.
                    </p>  
                        
                    
                    <hr class="border-dark my-5">
                    
                    <h1 class="mt-4">Bootstrap - “Before & After”</h1>
                    <p class="lead">
                    Let's look at a super <em>simple</em> comparison of a Web page with and without Bootstrap.
                    </p>

                    <h5 class="mt-5">Before - without Bootstrap:</h5>
                    <div data-codeply="o10in431jm" data-codeply-height="400px" ></div>
                    
                    <h5 class="mt-5">After - with Bootstrap:</h5>
                    <div data-codeply="RMPQJ3AqJn" data-codeply-height="400px" ></div>
                    
                    <p class="lead">
                        As you can see, once Bootstrap is added, the Web page instantly gets a new look. You simply reference any 
                        of Bootstrap’s reusable CSS classes in the HTML markup. In this example, I used Bootstrap's <code>text-center</code>  
                        class to easily center the text.
                    </p>
                    
                    <pre class="bg-dark text-white rounded my-3">
                    <code>
            &lt;div class="text-center"&gt;
               &lt;h1>Hello World&lt;/h1&gt;
               &lt;p&gt;
               There's Bootstrap 4 here.
               &lt;/p&gt;
            &lt;/div&gt;
                    </code>
                    </pre>
                    
                    <p class="lead">
                        Of course, I could have accomplished the same thing without using Bootstrap. I could have simply created my own CSS classes.
                    </p>
                    
                    <p class="lead">
                        Creating my own CSS would have been fine for this simple example. But, for more complex pages would I want to keep writing CSS classes for every style 
                        change that is needed? Would that CSS be <em>re-usable</em>, and <em>tested</em> across multiple browsers? Would I want to add 
                        CSS definitions to make the design “<em>responsive</em>” for different device widths? Of course, the <strong> answer is “No”</strong>, 
                        and that’s exactly why I’m here writing about the very popular Bootstrap.
                    </p>
                    
                </div>
                <div class="col-sm-10 mx-auto mt-5 py-4 border-top">
                    <div class="row">
                        <div class="col-sm mr-auto">
                            <a href="how-to.html">⟵ Prev: How to... Bootstrap </a>
                        </div>
                        <div class="col-sm-auto text-right">
                            <a href="bootstrap-getting-started.html">Next: How to Get Started with Bootstrap ⟶</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <div id="modalContact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-block">
                    <h3 class="text-center">How can we help you?</h3>
                </div>
                <div class="modal-body">
                    <form id="contactForm" role="form" method="post">
                        <div class="form-group">
                            <label for="inputEmail" class="col-md-2 form-control-label">Email</label>
                            <div class="col-md-12">
                                <input type="email" class="form-control" id="inputEmail" name="contactEmail" required="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputMessage" class="col-md-2 form-control-label">Message</label>
                            <div class="col-md-12">
                                <textarea class="form-control" id="inputMessage" rows="6" name="contactMessage"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xl-12">
                                <button type="submit" id="contactBtn" class="btn btn-primary btn-lg mx-auto">Send it</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="modalThanks" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-block text-center">
                    <h3>Thank you!</h3>
                    <h6>We'll be in touch</h6>
                </div>
            </div>
        </div>
    </div>
    <% include ./partials/footer %>
    <!--scripts loaded here-->
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

  </body>
</html>